<script>
    import { h, resolveComponent, withDirectives, resolveDirective } from 'vue';
    export default {
        props: {
            tag: {
                type: String,
                default: 'vb-table'
            },
            pageId: {
                type: String
            }
        },
        render() {
            const component = resolveComponent(this.tag);
            let componentRender = null;
            if (this.option) {
                componentRender = h(component, { option: this.option, ...this.$attrs }, this.$slots);
                this.$nextTick(() => {
                    this.data = componentRender.component.proxy;
                });
            }
            const loading = resolveDirective('loading'); //v-loading
            return withDirectives(h('div', { class: 'ChildPage TablePage' }, componentRender), [[loading, this.loading]]);
        },
        data() {
            return {
                option: null,
                loading: false,
                data: null
            }
        },
        computed: {
            // 当前页面
            _currentPagePath: function () {
                return this.$store.getters.getCurrentPagePath
            },
        },
        mounted() {
            this.getPageDetail(this.pageId || this.$route.meta.pageId)
        },
        methods: {
            /**
             * 查询页面配置信息
             * @param pageId
             */
            getPageDetail (pageId) {
                let self = this
                self.loading = true
                self.option = null
                self.callApi("getPageOption", {
                    id: pageId
                }).then(res => {
                    self.option = res.option
                }).finally(() => {
                    self.loading = false
                })
            }
        },
        watch: {
            _currentPagePath: function () {
                if (this.pageId) return;
                let page = this.$store.getters.getPageByPath(this._currentPagePath)
                if (page && page.pageId) {
                    this.getPageDetail(page.pageId)
                }
            }
        }
    }
</script>

<style scoped>

</style>
